<template>
  <app-page :login="false">
    <view style="box-sizing: border-box; width: 100vw; height: 55px; padding: 0 30rpx">
      <mxp-search v-model="search" background="#eeeeee" :focus="true" @confirm="onSearch"></mxp-search>
    </view>
    <mxp-refresh-page ref="mxpRefreshPageRef" :reachBottom="true" :queryData="queryData">
      <view v-if="search.length <= 0 || watchRecord.length <= 0" class="wrapper">
        <view class="search-find">
          <view class="title">搜索发现</view>
          <view class="item-wrap">
            <view v-for="i in searchFindList" :key="i.dramaTitle" class="item" @click="fillSearchValue(i.dramaTitle)">{{ i.dramaTitle }}</view>
          </view>
        </view>
      </view>
      <drama-search-list v-else :watchRecord="watchRecord" :search="search"></drama-search-list>
    </mxp-refresh-page>
  </app-page>
</template>

<script setup lang="ts">
  import { nextTick, onMounted, ref } from 'vue';

  import AppPage from '@/components/app-page/app-page.vue';
  import MxpSearch from '@/mxp-ui/mxp-search/mxp-search.vue';
  import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
  import { type SearchDrama, searchDramaFindAxios, searchDramaListAxios } from '@/api/drama';
  import DramaSearchList from './components/drama-search-list.vue';
  import MxpRefreshPage, { type Ins } from '@/mxp-ui/mxp-refresh-page/mxp-refresh-page.vue';
  import { useRefresh } from '@/mxp-ui/mxp-tool/hooks/useHooksRefresh.ts';

  const { mxpRefreshPageRef } = useRefresh(onPullDownRefresh, onReachBottom);
  /** 播放记录列表 */
  const watchRecord = ref<SearchDrama[]>([]);

  const searchFindList = ref<Record<'dramaTitle', string>[]>([]);
  const search = ref('');

  /** 搜索 */
  function onSearch() {
    nextTick(() => {
      watchRecord.value = [];
      if (search.value.length > 0) {
        mxpRefreshPageRef.value?.initLoadRefresh();
      } else if (searchFindList.value.length > 0) {
        mxpRefreshPageRef.value?.setMoreSuccess(1, 1);
      }
    });
  }

  /** 搜索 */
  function fillSearchValue(val: string) {
    search.value = val;
    onSearch();
  }

  /**
   * 获取悬浮的搜索发现列表
   */
  async function getSearchFindList() {
    try {
      const { data } = await searchDramaFindAxios();
      searchFindList.value = data;
    } catch (error) {}
  }
  /**
   * 获取搜索的短剧数据列表
   */
  async function queryData(ins: Ins) {
    try {
      if (search.value.length > 0) {
        const res = await searchDramaListAxios(ins.page, ins.size, search.value);
        watchRecord.value = ins.page > 1 ? watchRecord.value.concat(res.data.records) : res.data.records;
        ins.setMoreSuccess(res.data.records.length, res.data.total);
      } else {
        ins.setMoreSuccess(1, 1);
      }
    } catch (error) {
      ins.setMoreEmpty('fail_load', error.msg || '获取数据失败，BD001');
    }
  }

  onMounted(() => {
    getSearchFindList();
  });
</script>

<style lang="scss" scoped>
  .wrapper {
    position: absolute;
    top: 55px;
    z-index: 1;
    box-sizing: border-box;
    padding: 0 30rpx;

    .search-find {
      padding: 0 18rpx;

      .title {
        padding-bottom: 20rpx;
        font-size: 30rpx;
        font-weight: bold;
        color: #000000;
      }

      .item-wrap {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18rpx 10rpx;
        font-size: 26rpx;

        .item {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
</style>
